import { RatingDto } from '@/shared/interfaces/generated';
import { transformArrayIntoObject } from '@/shared/lib';
import cn from 'classnames';
import dayjs from 'dayjs';

import { renderStars } from '../../lib';
import cs from './Review.module.scss';

export const Review = ({ name, createdAt, rate, comment: com }: RatingDto) => {
  const comment = com as unknown as string;

  return (
    <div className={cs.review}>
      <div className={cs.header}>
        <div className={cs.info}>
          {!!name && `${name},`} {dayjs(createdAt).format('DD.MM.YYYY')}
        </div>
        <div className={cs.stars}>
          {transformArrayIntoObject(renderStars(rate)).map(({ id, title: star }, index) => (
            <div className={cn(cs.star, index < Math.round(rate) && cs.active)} key={id}>
              {star}
            </div>
          ))}
        </div>
      </div>
      {!!comment?.trim() && (
        <div className={cs.moreContainer}>
          <div className={cs.commentDefault}>{comment.trim()}</div>
        </div>
      )}
    </div>
  );
};
